<template>
  <div class="script-page">
    <el-row :gutter="8">
      <el-col :span="6">
        <el-card shadow="never">
          <script-tree ref="script-tree"></script-tree>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card shadow="never">
          <el-form label-width="auto" size="small" label-position="right" :inline="true">
            <el-form-item label="脚本名称" label-width="80px">
              <el-input v-model="scriptName" placeholder="请输入脚本名称"></el-input>
            </el-form-item>
          </el-form>

          <el-form label-width="auto" size="small" label-position="right">
            <el-form-item label="脚本内容" label-width="80px">
              <codemirror v-model="scriptContent" :options="cmOptions"></codemirror>
            </el-form-item>
            <el-form-item label label-width="80px">
              <el-button size="small" type="primary" @click="addScript">保 存</el-button>
              <el-button size="small" type="primary">重 置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/python/python.js'
import 'codemirror/theme/base16-light.css'
import 'codemirror/theme/eclipse.css'
import 'codemirror/theme/darcula.css'
import 'codemirror/theme/blackboard.css'
import dedent from 'dedent'
import ScriptTree from './ScriptTree'

export default {
  name: 'scriptPage',
  data () {
    return {
      isModal: false,
      attrs: [{
        key: '',
        value: ''
      }],
      scriptName: '',
      // scriptContent: dedent`
      // def poc(c):
      //   return True
      // `,

      scriptContent: dedent`
      import java.util.Map;

      public class Plugin {

          Map execute(Map map) {
            return map;
          }

      }
      `,
      /* cmOptions: {
        tabSize: 2,
        mode: 'text/x-python',
        theme: 'base16-light',
        lineNumbers: true,
        line: true
      } */
      cmOptions: {
        mode: 'text/x-java',
        theme: 'darcula',
        autofocus: true,
        lineNumbers: true,
        smartIndent: true,
        autoCloseBrackets: true
      }

    }
  },

  components: {
    codemirror,
    ScriptTree
  },

  methods: {

    addScript () {
      this.$post('/api/script/save', {
        scriptName: this.scriptName,
        scriptContent: this.scriptContent,
        scriptTpye: 'python'
      }).then(data => {
        if (data.success) {
          this.$message({
            showClose: true,
            message: '保存成功',
            type: 'success'
          })
          this.isModal = false
        } else {
          this.$message({
            showClose: true,
            message: data.msg,
            type: 'error'
          })
        }
      }).finally(() => {
        this.$refs['script-tree'].load()
      })
    },

    addAttr () {
      this.attrs.push({
        key: '',
        value: ''
      })
    },

    resetAattrs () {
      this.attrs = [
        {
          key: '',
          value: ''
        }
      ]
    },

    delAttr (index) {
      if (this.attrs.length > 1) {
        this.attrs.splice(index, 1)
      }
    }
  }
}

</script>
<style lang="scss" scoped>
.script-page {
  height: 100vh;
}

.add-btn {
  display: inline-block;
  color: #666;
  border: 1px solid #c4c6cf;
  height: 30px;
  line-height: 30px;
  padding: 0 8px;
  cursor: pointer;
}

.add-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.1);
  color: #ffffff;
}

.vue-codemirror {
  font-size: 9px;
  line-height: 20px;
  border: 1px solid #dcdfe6;
}
</style>
